<template>
  <div class="filter_box" slot="filterBox" v-if="isShowfilter">
    <div class="filter_time">时间区域</div>
    <div class="filter_btn">
      <mt-button size="small" class="filter_btns" @click="getTimes(7)">7天</mt-button>
      <mt-button size="small" class="filter_btns" @click="getTimes(30)">一个月</mt-button>
      <mt-button size="small" class="filter_btns" @click="getTimes(180)">半年</mt-button>
    </div>
    <div class="filter_date"  ref="filter">
      <mt-field type="date" class="data_btn" v-model="start"></mt-field>
      <mt-field type="date" class="data_btn" v-model="end"></mt-field>
    </div>
    <footer>
      <div class="button" @click="reset">重置</div>
      <div class="button" @click="done">完成</div>
    </footer>
  </div>
</template>

<script>
  export default {
    name: 'carbase',
    components: {
    },
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      },
      isShowfilter: {
        type: Boolean,
        default: false
      }
    },
    mixins: [],
    computed: {},
    data() {
      return {
        // isShowfilter: false,
        start: '',
        end: ''
      }
    },
    methods: {
      getTimes(time) {
        this.filter(this.changeTime(time), this.changeTime(0))
        this.isShowfilter = false
      },
      done() {
        this.filter(this.start.split('-').join(''), this.end.split('-').join(''))
        this.isShowfilter = false
      },
      reset() {
        this.start = ''
        this.end = ''
      },
      // 计算日期函数
      changeTime(n) {
        let d = new Date()
        let year = d.getFullYear()
        let mon = d.getMonth() + 1
        let day = d.getDate()
        if(day <= n) {
          if(mon > 1) {
            mon = mon - 1
          } else {
            year = year - 1
            mon = 12
          }
        }
        d.setDate(d.getDate() - n)
        year = d.getFullYear()
        mon = d.getMonth() + 1
        day = d.getDate()
        let s = year + '-' + (mon < 10 ? ('0' + mon) : mon) + '-' + (day < 10 ? ('0' + day) : day)
        return s.split('-').join('')
      }
    },
    filters: {
    },
    mounted() {
    },
    created() {
    }
  }
</script>

<style scoped>
footer {
  display: flex;
  text-align: center;
}
.button {
  flex-grow: 1;
  color: #fff;
  background: rgba(255, 153, 51, 1);
  flex-basis: 0;
}
.button:first-child {
  margin-right: .2rem;
}
.filter_btn {
  display: flex;
  text-align: center;
}
.filter_btns {
  flex-grow: 1;
  flex-basis: 0;
  margin-left: 1rem;
  margin-bottom: 1rem
}
.filter_btns:last-child {
  margin-right: 1rem;
}
.filter_time {
  margin-left: 1rem;
}
.filter_date {
  display: flex;
  text-align: center;
}
.date_btn {
  flex-grow: 1;
  flex-basis: 0;
}
</style>
